<%@ page import="com.swetake.util.Qrcode" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="java.awt.*" %>
<%@ page import="java.io.OutputStream" %>
<%@ page import="javax.imageio.ImageIO" %><%--
  Created by IntelliJ IDEA.
  User: xvhuichuang
  Date: 2017/7/5
  Time: 下午5:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wx-pay</title>
    <style type="text/css">
        img { border: none; }
        dl,dd,dt{
            margin: 0;
            padding: 0;
        }
        .container{
            margin:0 auto;
            width: 890px;
            border: 1px solid #ccc;
        }
        #header{
            width: 100%;
            height: 65px;
            line-height: 65px;
            margin-left: 20px;
        }
        #header span{
            font-size: 32px;
        }
        #header img{
            height: 40px;
            padding-top: 10px;
        }
        .info {
            width: 850px;
            height: 70px;
            padding: 20px;
            background-color: rgb(242,242,242);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .info .left{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .info .right{
            line-height: 70px;
        }

        .sm{
            width: 720px;
            border: 1px solid #000;
            border-radius: 10px;
            margin: 40px auto;
            padding-left:20px;
            padding-right:20px;
            padding-bottom: 20px;
        }
        .sm dl dt{
            height: 45px;
            line-height: 45px;
            border-bottom: 1px solid #f1f1f1;
        }
        .sm dl img{
            margin-top:20px;
            width: 155px;
        }
        .sm .view{
            margin-top: -40px;
            margin-left:auto;
            margin-right: auto;
            text-align: center;
        }
        .sm .view .ma img{
            width: 170px;
            height: 170px;
        }
        .sm .view img{
            width: 170px;
        }
    </style>
</head>
<body>
<div class="container">
    <header id="header" class="">
        <img src="./resource/wxpayres/WePayLogo.png" alt="">
        <span>收银台</span>
    </header><!-- /header -->
    <div class="info">
        <div class="left">
            <div class="num">
                订单编号：<span>XXXXXXXX</span>
            </div>
            <div class="type">
                订单类型：<span>XXXXXXXX</span>
            </div>
        </div>
        <div class="right">
            应付金额：<strong>¥78.40</strong>
        </div>
    </div>
    <div class="sm">
        <dl>
            <dt>微信支付</dt>
            <dd>
                <img src="./resource/wxpayres/WePayLogo.png" alt="微信Logo">
            </dd>
        </dl>
        <div class="view">
            <div class="ma">
                <%
                    String code = (String) request.getAttribute("code");
                    System.out.println("在前端接收到的数据是=" + code);
//                    try {
//                        Qrcode handler = new Qrcode();
//                        handler.setQrcodeErrorCorrect('M');
//                        handler.setQrcodeEncodeMode('B');
//                        handler.setQrcodeVersion(-1);
//                        byte[] contentBytes = code.getBytes("UTF-8");
//
//                        BufferedImage bufImg = new BufferedImage(80, 80, BufferedImage.TYPE_INT_RGB);
//
//                        Graphics2D gs = bufImg.createGraphics();
//
//                        gs.setBackground(Color.WHITE);
//                        gs.clearRect(0, 0, 140, 140);
//
//                        //设定图像颜色：BLACK
//                        gs.setColor(Color.BLACK);
//
//                        //设置偏移量  不设置肯能导致解析出错
//                        int pixoff = 2;
//                        //输出内容：二维码
//                        if (contentBytes.length > 0 && contentBytes.length < 124) {
//                            boolean[][] codeOut = handler.calQrcode(contentBytes);
//                            for (int i = 0; i < codeOut.length; i++) {
//                                for (int j = 0; j < codeOut.length; j++) {
//                                    if (codeOut[j][i]) {
//                                        gs.fillRect(j * 3 + pixoff, i * 3 + pixoff, 3, 3);
//                                    }
//                                }
//                            }
//                        } else {
//                            System.err.println("QRCode content bytes length = " + contentBytes.length + " not in [ 0,120 ]. ");
//                        }
//
//                        gs.dispose();
//                        bufImg.flush();
//                        response.reset();
//                        //生成二维码QRCode图片
//                        OutputStream outputStream = response.getOutputStream();
//                        ImageIO.write(bufImg, "png", outputStream);
//                        outputStream.close();
//                    } catch (Exception e) {
//                        e.printStackTrace();
//                    }
                %>
                <img id="img_" src="/paygate/wxPayCode?code=<%=code%>" alt="请扫描此处二维码">
            </div>
            <img src="说明文字.png" alt="说明文字">
        </div>
    </div>
</div>

</body>

<script>
    $(document).ready(function(){
        $('#img_').attr("src", data.CodeUrl);
    })

</script>


</html>